<template>
  <smart-page>
    <template #form>
      <smart-form
        :fields="formFields"
        :form-data="searchForm"
        ref="searchFormRef"
        @update:value="updateForm"
      >
      </smart-form>
      <el-button type="primary" @click="handleSearchUser()">提交</el-button>
      <el-button @click="handleResetForm()">重置</el-button>
    </template>
    <template #buttons>
      <el-button type="primary" @click="$router.push('/user/adduser.html')"
        >添加用户
      </el-button>
    </template>
    <template #table>
      <smart-table :height="300" :columns="columns" :tableData="userList">
        <template #action="{ row, index }">
          <el-button @click="handleEdit(row, index)">编辑</el-button>
          <el-button @click="handleDelete(row, index)">删除</el-button>
        </template>
      </smart-table>
    </template>
  </smart-page>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import type { Field } from "@/components/SmartForm.vue";
import { useUserStore } from "@/stores/userStore";
import router from "@/router";
const userStore = useUserStore();
const { userList, deleteUser, findUser } = userStore;

const searchFormRef = ref();

const searchForm = reactive({
  username: "",
  gender: "",
  skill: "",
  birthday: "",
});

const formFields: Field[] = [
  {
    type: "input",
    label: "用户名",
    name: "username",
    span: 8,
    attrs: {
      placeholder: "请输入用户名",
    },
  },
  {
    type: "radio",
    label: "性别",
    name: "gender",
    options: [
      { label: "男", value: "1" },
      { label: "女", value: "2" },
    ],
    attrs: {},
    span: 8,
  },
  {
    type: "checkbox",
    label: "技能",
    name: "skills",
    options: [
      { label: "Vue", value: "1" },
      { label: "React", value: "2" },
    ],
    attrs: {},
    span: 8,
  },
  {
    type: "datepicker",
    label: "出生日期",
    name: "birthday",
    span: 8,
  },
  {
    type: "datepicker",
    label: "工作时间",
    name: "worktime",
    attrs: {
      type: "daterange",
      unlinkPanels: true,
      shortcuts: [
        {
          text: "Last week",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "Last month",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
      ],
    },
  },
];

type Column = {
  prop: string;
  type?: string;
  label: string;
  fixed?: boolean | string;
  width?: string;
  align?: string;
  buttons?: { text: string; click: (row: object) => void }[];
};

export type User = {
  id: number;
  username: string;
  name?: string;
  gender?: string;
  department?: string;
  email?: string;
  phone?: string;
  status?: string;
};

const columns: Column[] = [
  { prop: "username", fixed: true, label: "用户名", width: "150px" },
  { prop: "name", label: "姓名", align: "center", width: "150px" },
  { prop: "gender", label: "性别", width: "80px" },
  { prop: "department", label: "部门", width: "150px" },
  { prop: "email", label: "邮箱", width: "150px" },
  { prop: "phone", label: "电话", width: "150px" },
  { prop: "status", label: "激活状态", width: "80px" },
  {
    prop: "action",
    label: "操作",
    width: "200px",
    fixed: "right",
  },
];

const updateForm = (val: object) => {
  console.log(11111, val);
};

const handleSearchUser = () => {
  console.log("search", searchForm);
};

const handleResetForm = () => {
  searchFormRef.value.reset();
  console.log("reset", searchForm);
};

const handleEdit = (row: User, index: number) => {
  console.log("edit", row.id, index);
  findUser(row.id);
  router.push({
    path: `/user/edituser.html`,
  });
};

const handleDelete = (row: User, index: number) => {
  console.log("click", row.id, index);
  const con = () => confirm("确定删除该用户？");
  if (con()) {
    deleteUser(row.id);
  }
};

onMounted(() => {
  console.log("mounted");
});
</script>
